<template>
  <VbDemo class="va-pagination-demo">
    <VbCard>
      Current Page
      <input
        v-model.number="activePage"
        aria-hidden="true"
        type="number"
      />
    </VbCard>
    <VbCard>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <th>Description</th>
            <th>VaPagination</th>
          </tr>
          <tr>
            <td>Default</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Disabled</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  disabled
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Presets</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  buttons-preset="default"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  buttons-preset="primary"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  buttons-preset="secondary"
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Gapped</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  gapped
                  buttons-preset="default"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  gapped
                  buttons-preset="primary"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  gapped
                  buttons-preset="secondary"
                />
              </VbCard>
            </td>

          </tr>
          <tr>
            <td>Visible Pages</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="10"
                  :visible-pages="3"
                  buttons-preset="default"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="10"
                  :visible-pages="3"
                  buttons-preset="primary"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="10"
                  :visible-pages="3"
                  buttons-preset="secondary"
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Bordered</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  border-color="primary"
                  gapped
                  buttons-preset="default"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  border-color="primary"
                  gapped
                  buttons-preset="primary"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  border-color="primary"
                  gapped
                  buttons-preset="secondary"
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Rounded</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  border-color="primary"
                  gapped
                  rounded
                  buttons-preset="default"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  border-color="primary"
                  gapped
                  rounded
                  buttons-preset="primary"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  border-color="primary"
                  gapped
                  rounded
                  buttons-preset="secondary"
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Custom active page color</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  buttons-preset="default"
                  active-page-color="warning"
                  gapped
                  rounded
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  buttons-preset="primary"
                  active-page-color="warning"
                  gapped
                  rounded
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  buttons-preset="secondary"
                  active-page-color="warning"
                  gapped
                  rounded
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Sizes</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  size="small"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  size="medium"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  size="large"
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Colored</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  color="info"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  color="danger"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  color="warning"
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Disabled</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  disabled
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Without Links</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :boundary-links="false"
                  :pages="10"
                  :visible-pages="3"
                />
                <va-pagination
                  v-model="activePage"
                  :direction-links="false"
                  :pages="10"
                  :visible-pages="3"
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Icons</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="10"
                  :visible-pages="3"
                  direction-icon-left="volume_mute"
                  direction-icon-right="volume_down"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="10"
                  :visible-pages="3"
                  boundary-icon-left="volume_off"
                  boundary-icon-right="volume_up"
                />
                <va-pagination
                  v-model="activePage"
                  :pages="10"
                  :visible-pages="3"
                  boundary-icon-left="volume_off"
                  boundary-icon-right="volume_up"
                  direction-icon-left="volume_mute"
                  direction-icon-right="volume_down"
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Input</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="20"
                  input
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Input without links</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="20"
                  input
                  :boundary-links="false"
                  :direction-links="false"
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Boundary Icons</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="20"
                  :visible-pages="7"
                  boundary-numbers
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Plain with input</td>
            <td>
              <VbCard>
                <va-pagination
                  v-model="activePage"
                  :pages="5"
                  input
                  plain
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Stateful</td>
            <td>
              <VbCard>
                <va-pagination
                  :pages="5"
                  stateful
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Use context</td>
            <td>
              <VbCard>
                <va-config :components="{
          VaPagination: {
            color: 'danger',
            pages: 10,
            visiblePages: 3,
            input: true,
          }
        }">
                  <va-pagination />
                </va-config>
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Use total and page size</td>
            <td>
              <VbCard>
                <div>
                  Page size:
                  <input v-model.number="pageSize" aria-hidden="true" type="number">
                </div>
                <div>
                  Total:
                  <input v-model.number="total" aria-hidden="true" type="number">
                </div>
                <va-pagination
                  v-model="activeTotalPage"
                  :page-size="pageSize"
                  :total="total"
                  :visible-pages="7"
                  boundary-numbers
                />
                <div>
                  Value: {{ activeTotalPage }}
                </div>
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Hide on single page</td>
            <td>
              <VbCard>
                <va-pagination
                  :pages="1"
                  hide-on-single-page
                />
              </VbCard>
            </td>
          </tr>
          <tr>
            <td>Long pagination (should be trunked)</td>
            <td>
              <VbCard>
                <va-pagination
                  :pages="100"
                />
              </VbCard>
            </td>
          </tr>
        </tbody>
      </table>
    </VbCard>
  </VbDemo>
</template>

<script>
import { VaPagination } from './index'
import { VaConfig } from '../va-config'

export default {
  components: {
    VaPagination,
    VaConfig,
  },

  data () {
    return {
      activePage: 4,
      activeTotalPage: 3,
      pageSize: 10,
      total: 100,
    }
  },
}
</script>

<style lang="scss">
.va-pagination-demo {
  & .va-pagination {
    padding: 1rem;
  }
}
</style>
